<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

	<meta charset="utf-8" />

	<title>Metronic | Pages - Blog Post</title>

	<meta content="width=device-width, initial-scale=1.0" name="viewport" />

	<meta content="" name="description" />

	<meta content="" name="author" />

	<!-- BEGIN GLOBAL MANDATORY STYLES -->

	<link href="<%=path %>/media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

	<link href="<%=path %>/media/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>

	<link href="<%=path %>/media/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

	<link href="<%=path %>/media/css/style-metro.css" rel="stylesheet" type="text/css"/>

	<link href="<%=path %>/media/css/style.css" rel="stylesheet" type="text/css"/>

	<link href="<%=path %>/media/css/style-responsive.css" rel="stylesheet" type="text/css"/>

	<link href="<%=path %>/media/css/default.css" rel="stylesheet" type="text/css" id="style_color"/>

	<link href="<%=path %>/media/css/uniform.default.css" rel="stylesheet" type="text/css"/>

	<link href="<%=path %>/media/css/jquery.fancybox.css" rel="stylesheet" />

	<!-- END GLOBAL MANDATORY STYLES -->

	<!-- BEGIN PAGE LEVEL STYLES -->

	<link href="<%=path %>/media/css/blog.css" rel="stylesheet" type="text/css"/>

	<!-- END PAGE LEVEL STYLES -->

	<link rel="shortcut icon" href="<%=path %>/media/image/favicon.ico" />

</head>

<!-- END HEAD -->

<!-- BEGIN BODY -->

<body class="page-header-fixed page-full-width">

	<!-- BEGIN HEADER -->
	<jsp:include page="/include/head.jsp"/>
	<!-- END HEADER -->

	<!-- BEGIN CONTAINER -->   

	<div class="page-container">


		<!-- BEGIN PAGE -->

		<div class="page-content">
			<div class="container">

				<!-- BEGIN PAGE HEADER-->

				<div class="row-fluid">

					<div class="span12">


						<!-- BEGIN PAGE TITLE & BREADCRUMB-->

						<h3 class="page-title">

							文章详情 <small>blog post </small>

						</h3>

						<ul class="breadcrumb">

							<li>

								<i class="icon-home"></i>

								<a href="blogList.do">博客</a> 

								<i class="icon-angle-right"></i>

							</li>
							
							<li>

								<a href="#">${blog.theme.themeName }</a>
							</li>
							
						</ul>

						<!-- END PAGE TITLE & BREADCRUMB-->

					</div>

				</div>

				<!-- END PAGE HEADER-->

				<!-- BEGIN PAGE CONTENT-->

				<div class="row-fluid">

					<div class="row-fluid page-content">

						<div class="row-fluid">

							<!--end span9-->

							
						
							<div class="span9 article-block">

								<h1>${blog.blogTitle }</h1>

								<div class="blog-tag-data">
									<div class="row-fluid">
										<div class="span6">
											<ul class="unstyled inline blog-tags">
												<li>
													<i class="icon-tags"></i> 
													<c:forEach var="tag" items="${blog.tagList}">
														<c:out value="${tag.tagName}  " />
													</c:forEach>
												
												</li>
												<li><i class="icon-calendar"></i> <a href="#">${blog.blogTime }</a></li>
												<li><i class="icon-comments"></i> <a href="#">${blog.blogTimes }</a></li>
											</ul>
										</div>									
									</div>

								</div>

								<!--end news-tag-data-->

								<div>

									${blog.blogContent }
								</div>

								<hr>

								<div class="media">
									<!--  
									<h3>Comments</h3>

									<a href="#" class="pull-left">

									<img alt="" src="media/image/9.jpg" class="media-object">

									</a>

									<div class="media-body">

										<h4 class="media-heading">Media heading <span>5 hours ago / <a href="#">Reply</a></span></h4>

										<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

										<hr>

									

										<div class="media">

											<a href="#" class="pull-left">

											<img alt="" src="media/image/5.jpg" class="media-object">

											</a>

											<div class="media-body">

												<h4 class="media-heading">Media heading <span>17 hours ago / <a href="#">Reply</a></span></h4>

												<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

											</div>

										</div>

									

										<hr>

										<div class="media">

											<a href="#" class="pull-left">

											<img alt="" src="media/image/7.jpg" class="media-object">

											</a>

											<div class="media-body">

												<h4 class="media-heading">Media heading <span>2 days ago / <a href="#">Reply</a></span></h4>

												<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

											</div>

										</div>
										
									

									</div>
								-->
								</div>

								<!--  
								<div class="media">

									<a href="#" class="pull-left">

									<img alt="" src="media/image/6.jpg" class="media-object">

									</a>

									<div class="media-body">

										<h4 class="media-heading">Media heading <span>July 5,2013 / <a href="#">Reply</a></span></h4>

										<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

									</div>

								</div>
								

								<hr>

								<div class="post-comment">

									<h3>Leave a Comment</h3>

									<form>

										<label>Name</label>

										<input type="text" class="span7 m-wrap">

										<label>Email <span class="color-red">*</span></label>

										<input type="text" class="span7 m-wrap">

										<label>Message</label>

										<textarea class="span10 m-wrap" rows="8"></textarea>

										<p><button class="btn blue" type="submit">Post a Comment</button></p>

									</form>

								</div>
								-->
							</div>
							
							<jsp:include page="../include/blog_item_sidebar.jsp"/>	
						</div>

					</div>

				</div>

				<!-- END PAGE CONTENT-->

			</div>

			<!-- END PAGE CONTAINER--> 

		</div>

		<!-- END PAGE -->    

	</div>

	<!-- END CONTAINER -->

	<!-- BEGIN FOOTER -->
	<jsp:include page="../include/foot.jsp"/>

	<!-- END FOOTER -->

	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->

	<!-- BEGIN CORE PLUGINS -->

	<script src="<%=path %>/media/js/jquery-1.10.1.min.js" type="text/javascript"></script>

	<script src="<%=path %>/media/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

	<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->

	<script src="<%=path %>/media/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>      

	<script src="<%=path %>/media/js/bootstrap.min.js" type="text/javascript"></script>

	<script src="<%=path %>/media/js/jquery.slimscroll.min.js" type="text/javascript"></script>

	<script src="<%=path %>/media/js/jquery.blockui.min.js" type="text/javascript"></script>  

	<script src="<%=path %>/media/js/jquery.cookie.min.js" type="text/javascript"></script>

	<script src="<%=path %>/media/js/jquery.uniform.min.js" type="text/javascript" ></script>

	<!-- END CORE PLUGINS -->

	<script src="<%=path %>/media/js/app.js"></script>      

	<script>

		jQuery(document).ready(function() {    

		   App.init();
		   
		   $("#navTop > li[title='blog']").addClass("active");

		});

	</script>

	<!-- END JAVASCRIPTS -->

<script type="text/javascript">  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-37564768-1']);  _gaq.push(['_setDomainName', 'keenthemes.com']);  _gaq.push(['_setAllowLinker', true]);  _gaq.push(['_trackPageview']);  (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();</script></body>

<!-- END BODY -->

</html>